import React from 'react';
import Head from 'next/head'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Drawer, AppBar, Toolbar, Menu, List, ListItem, MenuItem, IconButton, Hidden, Divider, Button } from '@material-ui/core';
import { People } from '@material-ui/icons';
import MenuIcon from '@material-ui/icons/Menu';
import styled from 'styled-components'
import Router from 'next/router'
import axios from 'axios';
import withRoot from '../components/withRoot';
import UserList from '../components/UserList';

const ListText = styled.div`
flex: 1 1 auto;
padding: 0 16px;
padding-right:5px;
min-width: 0;
cursor: pointer;
`;
const UserAvatar = styled.img`
width:35px;
    height:35px;
    vertical-align: middle;
    margin-right:5px;
border-radius:50%;

`;
const UserName = styled.span`
position: relative ;
font-size:16px;

`;
const LeftTitle = styled.div`
z-index:4;
position: relative;
background-image: url("/static/img/sidebar-4.fc9cb053.jpg");

width:100%;
height: 100%;
 
display: block;
position: absolute;
overflow: auto;
background-position: center center;
background-size: cover;
&:after {
    width: 100%;
    height: 100vh;
    min-height: 65px;
    z-index: -1;
    content: "";
    top:0;
    left:0;
    opacity: .8;
    position: absolute;
    background: #000;
}
`;

const LogoImg = styled.img`
  width: 40%;
  border: 0;


vertical-align: middle;
`;
const LogoText = styled.div`
padding: 15px 15px;

 
max-height: 30px;
margin-left: 10px;
margin-right: 15px;

`;

const LogoLink = styled.a`
 
display: block;
font-size: 24px;
text-align: center;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 30px;
text-transform: uppercase;
text-decoration: none;
background-color: transparent;
 
  `;


const LightDivider = styled(Divider)`
&&{
    background-color: rgba(180, 180, 180, 0.3);
    position: absolute;
    right: 15px;
width: calc(100% - 30px);
    // padding:0 15px;
}
`;
const Drawers = styled(Drawer)`
&&{
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    background:none;
    color:#fff ;
    z-index:3;
}
`;


const ListItems = styled(ListItem)`
&&{
transition: background-color .4s ;
margin: 5px 0;

border-radius: 3px;
background:${props => props.folderlistitemsselect == 'true' ? '#00acc1' : 'none'};
box-shadow:${props => props.folderlistitemsselect == 'true' ? ' 0 12px 20px -10px rgba(0,188,212,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(0,188,212,.2)' : ''};
color:#fff ;
&:hover {
    background:${props => props.folderlistitemsselect == 'true' ? '#00acc1' : ''};
}
}
`;

const Lists = styled(List)`
&&{
   padding: 10px 15px; 

}

`;

const drawerWidth = 225;
const styles = theme => ({
  root: {
    flexGrow: 1,

    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    width: '100%',
  },
  big_icon_color: {
    fontSize: '36px',
    color: '#fff'
  },
  flex: {
    flex: 1,
  },
  appBar: {
    position: 'fixed',
    marginLeft: drawerWidth,
    [theme.breakpoints.up('md')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  navIconHide: {
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth,
    [theme.breakpoints.up('md')]: {
      position: 'fixed',
    },
    border: 'none',
    boxShadow: '0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)',

  },
  content: {
    width: '100%',
    [theme.breakpoints.up('md')]: {
      marginLeft: drawerWidth,
    },

    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: `${theme.spacing.unit * 5}px ${theme.spacing.unit * 3}px  `
  },
  listItemTextcolor: {
    color: 'papayawhip'
  },
  card: {
    textAlign: 'right',
    overflow: ' visible'
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)',
  },
  title: {
    marginBottom: 16,
    fontSize: 14,
  },
  pos: {
    marginBottom: 12,
    color: '#666',
    fontWeight: '300'
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120,
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),

  },
  secondaryHeading: {
    fontSize: theme.typography.pxToRem(15),
    // color: theme.palette.text.secondary,
    marginLeft: 15

  },
  stroke: {
    color: theme.palette.text.secondary,
  },
  cardContent: {
    paddingBottom: '10px  !important'
  },
  table: {
    // minWidth: 700,
    // width:'100%',
    textAlign: 'left !important'
  },
  row: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.background.default,
    },
  },
});

class MenuAppBar extends React.Component {
  static async getInitialProps({ req, res, query }) {
    const isClient = !req
    if (isClient) {

      const { data } = await axios.get("/a/index", {
        withCredentials: true
      });
      if (!data.isLogin) {
        Router.push({
          pathname: '/login'
        });
      }
      const user = data.user;
      return { user };

    } else {
      const user = res.locals.data.user
      return { user };
    }


  }
  constructor(props) {
    super(props);
    this.state = {
      mobileOpen: false,
      anchorEl: null,
    };

    // This binding is necessary to make `this` work in the callback

    this.handleMenu = this.handleMenu.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.loginOut = this.loginOut.bind(this);


  }

  handleClose = () => {
    this.setState({ anchorEl: null });
  };
  handleDrawerToggle = () => {
    this.setState(prevState => ({
      mobileOpen: !prevState.mobileOpen

    }));
  };


  handleMenu(event) {
    this.setState({
      anchorEl: event.currentTarget,

    });
  }

  loginOut() {
    window.location.href = '/logout?callback_url=/login'
  }

  render() {

    const { classes, theme, user } = this.props;
    const { anchorEl } = this.state;


    const drawer = (
      <LeftTitle>
        <div className={classes.toolbar} >
          <LogoText>
            <LogoLink>
              {/* <LogoImg src="/static/img/logo.jpg" alt="" /> */}
              用户管理平台
            </LogoLink>
          </LogoText>
        </div>
        <LightDivider />
        <Lists id='lists' >

          <ListItems button folderlistitemsselect='true'>

            <People />
            <ListText>
              用户列表
            </ListText>

          </ListItems>

        </Lists>

      </LeftTitle>
    );


    return (
      <div className={classes.root}>
        <Head>

          <title>首页</title>

        </Head>
        <AppBar className={classes.appBar}>

          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              className={classes.navIconHide}
              onClick={this.handleDrawerToggle}
            >
              {/* <Menu /> */}
              <MenuIcon />
            </IconButton>
            <Button
              aria-label="More"
              aria-haspopup="true"
              aria-owns={anchorEl ? 'simple-menu' : null}
              color="inherit"
              onClick={event => this.handleMenu(event)}
            >
              {/* <AccountCircle /> */}
              <UserAvatar src='/static/img/matthew.png' component='span' alt='' />
              <UserName>

                {user && user.phone ? user.phone : ''}

              </UserName>

            </Button>
            <Menu
              id="simple-menu"
              anchorEl={anchorEl}
              open={anchorEl ? true : false}
              onClose={this.handleClose}
            >

              <MenuItem onClick={this.loginOut}  >
                退出
              </MenuItem>
            </Menu>
          </Toolbar>

        </AppBar>
        <Hidden mdUp>
          <Drawers
            variant="temporary"
            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
            open={this.state.mobileOpen}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            onClose={this.handleDrawerToggle}
          >
            <div />
            {drawer}
          </Drawers>
        </Hidden>
        <Hidden smDown implementation="css">
          <Drawers
            open
            variant="permanent"
            classes={{
              paper: classes.drawerPaper,
            }}
          >
            {drawer}
            <div />
          </Drawers>
        </Hidden>
        <main className={classes.content}>

          <div className={classes.toolbar} />

          <UserList current_user={user} />


        </main>
      </div>
    );
  }
}

MenuAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withRoot(withStyles(styles, { withTheme: true })(MenuAppBar));
